import React, { lazy, Suspense } from "react";

import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
// 导入首页和城市选择两个组件页面
import Home from "./pages/Home";
// import CityList from "./pages/CityList";
// import Map from "./pages/Map";
// // 房屋详情组件
// import HouseDetail from "./pages/HouseDetail";
// import Login from "./pages/Login";
// import Registe from "./pages/Registe";

// // 房源发布
// import Rent from "./pages/Rent";
// import RentAdd from "./pages/Rent/Add";
// import RentSearch from "./pages/Rent/Search";
// import Favorate from "./pages/Favorate";

// 路由访问控制组件
import AuthRoute from "./components/AuthRoute";

// 使用动态组件的方式导入组件
const CityList = lazy(() => import("./pages/CityList"));
const Map = lazy(() => import("./pages/Map"));
// 房屋详情组件
const HouseDetail = lazy(() => import("./pages/HouseDetail"));
const Login = lazy(() => import("./pages/Login"));
const Registe = lazy(() => import("./pages/Registe"));

// 房源发布
const Rent = lazy(() => import("./pages/Rent"));
const RentAdd = lazy(() => import("./pages/Rent/Add"));
const RentSearch = lazy(() => import("./pages/Rent/Search"));
const Favorate = lazy(() => import("./pages/Favorate"));

// 导入要使用的组件
function App() {
  return (
    <Router>
      <Suspense fallback={<div className="route-loading">loading...</div>}>
        <div className="App">
          {/* 配置导航菜单 */}
          {/* 配置路由 */}
          <Route exact path="/" render={() => <Redirect to="/home" />}></Route>
          <Route path="/home" component={Home}></Route>

          <Route path="/cityList" component={CityList}></Route>
          <Route path="/map" component={Map}></Route>

          {/* 房屋详情组件 */}
          <Route path="/detail/:id" component={HouseDetail}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/registe" component={Registe}></Route>

          {/* 配置登录后才能访问的页面 */}
          <AuthRoute exact path="/rent" component={Rent}></AuthRoute>
          <AuthRoute path="/rent/add" component={RentAdd}></AuthRoute>
          <AuthRoute path="/rent/search" component={RentSearch}></AuthRoute>
          <AuthRoute path="/favorate" component={Favorate}></AuthRoute>
        </div>
      </Suspense>
    </Router>
  );
}

export default App;
